<template>
  <div class="container">
    <v-form-designer ref="vfdRef" :designerConfig="designerConfig">
      <el-button type="primary" link icon="Promotion" @click="handleForm">保存</el-button>
    </v-form-designer>
    <!--表单配置详情-->
    <el-dialog :title="formTitle" v-model="formOpen" width="500px" append-to-body>
      <el-form ref="addform" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="表单名称" prop="formName">
          <el-input v-model="form.formName" placeholder="请输入表单名称" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm(addform)">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {fetchData, saveorUpadateDate} from "@/api";
import {ElMessage, FormInstance} from "element-plus";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";

let  vfdRef = ref(null)
let form:any=reactive({})
let formOpen=ref(false)
let route=useRoute()
let router=useRouter()
let store = useStore()
const formTitle=ref("")
const rules= {}
const addform=ref<FormInstance>()
const reset = () => {
  form=reactive({})
}
const designerConfig={
  languageMenu: true,  //是否显示语言切换菜单
  externalLink: false,  //是否显示GitHub、文档等外部链接
  formTemplates: true,  //是否显示表单模板
  eventCollapse: true,  //是否显示组件事件属性折叠面板
  widgetNameReadonly: false,  //禁止修改组件名称

  clearDesignerButton: true,  //是否显示清空设计器按钮
  previewFormButton: true,  //是否显示预览表单按钮
  importJsonButton: false,  //是否显示导入JSON按钮
  exportJsonButton: false,  //是否显示导出JSON器按钮
  exportCodeButton: true,  //是否显示导出代码按钮
  generateSFCButton: false,  //是否显示生成SFC按钮
  toolbarMaxWidth: 300,  //设计器工具按钮栏最大宽度（单位像素）
  toolbarMinWidth: 200,  //设计器工具按钮栏最小宽度（单位像素）
  presetCssCode: '',  //设计器预设CSS样式代码
  resetFormJson: false,  //是否在设计器初始化时将表单内容重置为空
}

const cancel = () => {
   formOpen.value = false;
   reset();
}


const handleForm=()=>{
  form.formContent =JSON.stringify(vfdRef.value.getFormJson());

  formOpen.value = true;
  formTitle.value = "添加表单";
}
const submitForm = (formName: FormInstance) => {
  formName.validate((valid) => {
    if(valid){
         saveorUpadateDate("/process/flowable/sysform/save",form).then((res:any)=>{
           ElMessage.success("保存成功")
           formOpen.value=false
           //清除页面缓存，再跳转
           store.dispatch('tagsView/delRouterView', {
             "path":"/admin/flowable/form",
           })
           router.push({ path: '/admin/flowable/form'})
         })
    }
  })
}
onMounted(()=>{
  const formId =  route.query && route.query.formId;
  if(formId) {
    fetchData("/process/flowable/sysform/" + formId).then((res: any) => {
      if (res.formContent) {
        vfdRef.value.setFormJson(JSON.parse(res.formContent))
        form.formName = res.formName
        form.remark = res.remark
        form.formId=res.formId
      }
    })
  }else{
    vfdRef.value.clearDesigner()
  }
})
</script>

<style lang='scss' scoped>
body {
  margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
}
</style>
